<template>
  <div>
  <h1>推送测试</h1>
    <ul>
      <li
        v-for="product in this.$store.state.ProductionAction.products"
        :key="product.id"
      >
        {{ product.title }} - {{ product.price }} - X{{product.inventory}}
        <br />
        <button
          :disabled="!product.inventory"
          @click="addProductToCart(product)"
        >Add to cart</button>
      </li>
      <li></li>

    </ul>
    <ul></ul>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ProductItem from "@/model/productItem";
@Component
export default class ProductList extends Vue {
  productlist: Array<ProductItem> = this.$store.state.ProductionAction.products;

  cartAction = this.$store.state.CartAction;

  async mounted() {
    await this.$store.state.ProductionAction.loadProducts();
    //console.log(this.$store.state.ProductionAction.products, 111);
  }

  public addProductToCart(product: ProductItem) {
    this.$store.state.CartAction.addProductToCart(product);
    this.$store.state.ProductionAction.decrementProductInventory(product.id);
  }
}
</script>

<style lang= "scss" scoped>
li {
  list-style: none;
}
</style>
